<template>
  <div class="card content-box">
    <ECharts :option="option" />
  </div>
</template>

<script setup name="nestedChart">
//综合分析
import { coreService } from "@/api/bigdata/index";
import ECharts from "@/components/ECharts/index.vue";
import { onMounted, ref } from "vue";

//数据模型
const dataList = ref({
  PetitionDepWordCounts: [
    {
      count: 2,
      value: "重庆市信访办"
    },
    {
      count: 1,
      value: "重庆市江北区信访办"
    },
    {
      count: 1,
      value: "重庆信访办"
    }
  ],
  TotalEvents: 7,
  StatusCounts: {
    Submitted: 3,
    UnKnownStatus: 3,
    PendingProcessing: 0,
    PendingReview: 1,
    Reviewed: 0,
    Processed: 0
  }
});

//获取数据
const getData = async () => {
  let result = await coreService();
  dataList.value = result.data;
};
onMounted(getData);

const option = {
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b}: {c} ({d}%)"
  },
  legend: {
    textStyle: {
      color: "#a1a1a1"
    }
  },
  series: [
    {
      // 外圈：PetitionDepWordCounts 数据
      name: "Petition Departments",
      type: "pie",
      selectedMode: "single",
      radius: ["40%", "65%"], // 外圈的半径范围
      label: {
        position: "inner",
        fontSize: 14
      },
      labelLine: {
        show: false
      },
      data: Object.entries(dataList.value.StatusCounts).map(([key, value]) => ({
        value: value,
        name: key
      }))
    },
    {
      // 内圈：StatusCounts 数据
      name: "Status",
      type: "pie",
      radius: ["70%", "90%"], // 内圈的半径范围
      label: {
        formatter: "{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ",
        backgroundColor: "#F6F8FC",
        borderColor: "#8C8D8E",
        borderWidth: 1,
        borderRadius: 4,
        rich: {
          a: {
            color: "#6E7079",
            lineHeight: 22,
            align: "center"
          },
          hr: {
            borderColor: "#8C8D8E",
            width: "100%",
            borderWidth: 1,
            height: 0
          },
          b: {
            color: "#4C5058",
            fontSize: 14,
            fontWeight: "bold",
            lineHeight: 33
          },
          per: {
            color: "#fff",
            backgroundColor: "#4C5058",
            padding: [3, 4],
            borderRadius: 4
          }
        }
      },
      data: dataList.value.PetitionDepWordCounts.map(item => ({
        value: item.count,
        name: item.value
      }))
    }
  ]
};
</script>

<style scoped lang="scss">
@import "./index";
</style>
